<template>
    <div class="edit">
        <el-dialog :model-value="dialogVisible" title="编辑用户" @close="closefn">
            <el-form :model="form" :rules="rules" ref="rulesForm">
                <el-form-item label="账号:" prop="username">
                    <el-input v-model="form.username" autocomplete="off" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="姓名:" prop="nickName">
                    <el-input v-model="form.nickName" autocomplete="off" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="form.password" type="password" autocomplete="off" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="备注:" prop="note">
                    <el-input v-model="form.note" type="textarea" rows="4" autocomplete="off" placeholder="请输入备注" />
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-radio-group v-model="form.status" >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http"
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, watch } from 'vue';
const props = withDefaults(defineProps<{
    dialogVisible: boolean,
    edID: number
}>(), {
    dialogVisible: false,
    edID: 0
})
const form = reactive({
    id: 0,
    username: "",
    nickName: "",
    email: "",
    password: "",
    note: "",
    status: 1
})
watch(() => props.edID, () => {
    // 不加watch,页面一打开就会执行 我们需要监听到id才执行
    if (props.edID != 0) {
        http.admin.getuserinfoidHttp(props.edID).then(res => {
            console.log("根据id获取用户信息", res);
            Object.assign(form, res.data)
        })
    } else {
        // 清空表单
        rulesForm.value.resetFields()
    }

})
const emit = defineEmits<{
    (event: "cancel"): void
    (event: "confirm"): void
}>()
const rulesForm = ref()
const checkemail = (rule: any, value: any, callback: any) => {
    let reg = /^[\w\-]+@[a-zA-Z\d\-]+(\.[a-zA-Z]{2,8}){1,2}$/
    if (!value) {
        callback("请输入邮箱地址!")
    } else if (!reg.test(value)) {
        callback("请输入正确邮箱地址!")
    } else {
        callback()
    }
}
// 表单验证规则
const rules = reactive({
    username: [{ required: true, message: "请输入账号!", tirgger: "blue" }],
    nickName: [{ required: true, message: "请输入姓名!", tirgger: "blue" }],
    email: [{ validator: checkemail, trigger: 'blur' }],
    password: [{ required: true, message: "请输入密码!", tirgger: "blue" }],
})
//点击取消
function cancel() {
    emit("cancel")
}
// 新增方法
function addfz() {
    ElMessageBox.confirm(
        '此操作将新增用户信息,是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.admin.registerHttp(form).then(res => {
                console.log(res)
                if (res.code == 200) {
                    ElMessage.success("新增成功")
                    // 清空表单
                    emit("confirm")
                    rulesForm.value.resetFields()
                }
            })
        })
        .catch(() => {
            ElMessage.warning("取消了当前操作")
        })
}
// 编辑
function editfz() {
    ElMessageBox.confirm(
        '此操作将修改用户信息,是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.admin.updateinfoHttp(form).then(res => {
                console.log(res)
                if (res.code == 200) {
                    ElMessage.success("编辑成功")
                    // 清空表单
                    emit("confirm")
                    // 清空内容
                    rulesForm.value.resetFields()
                }
            })
        })
        .catch(() => {
            ElMessage.warning("取消了当前操作")
        })
}
// 点击确认
function confirm() {
    rulesForm.value.validate((isValid: boolean) => {
        if (isValid) {
            console.log("验证通过");
            if (form.id == 0) {
                // 新增操作
                addfz()
            } else {
                // 编辑操作
                editfz()
            }
        }
    })

}
// x关闭
const closefn = () => {
    emit("cancel")
}
</script>

<style lang="less" scoped>
</style>